import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Input, Button, Pagination, message } from 'antd'
import { EditOutlined } from '@ant-design/icons'
import './blog.less'
import TopNav from '../top_nav'
import BottomBar from '../bottom_bar'
import BlogItem from './blog_item'
import MyCategory from '../../components/mycategory'
import {getMemberInfo} from '../../utils/auth'
import blogApi from '../../api/blog'
class Blog extends Component {
  state = {
    key: '',
    categoryId: "",
    categoryTitle: "",
    pageNum: 1,
    pageSize: 10,
    total: 0,
    blogList: []
  }
  componentDidMount() {
    window.scrollTo(0, 0)
    const { key, categoryId, pageNum,pageSize } = this.state
    this.getBlogList(key, categoryId, pageNum,pageSize)
  }
  getBlogList = (key, categoryId, pageNum, pageSize) => {
    blogApi.queryList({ key, categoryId, pageNum, pageSize }).then(res => {
      if (res.success) {
        this.setState({
          blogList: res.data.records,
          total: res.data.total
        })
      }
    }).catch(err => {
      console.log(err);
    })
  }
  // 查询方法
  onSearch = (event) => {
    this.setState({
      key:event
    })
    this.getBlogList(event,this.state.categoryId,this.state.pageNum,this.state.pageSize)
  }
  // 修改页码
  onPageChange = (current, pageSize) => {
    this.getBlogList(this.state.key,this.state.categoryId,current,pageSize)
  }
  // 跳转到发布文章页面
  toBlogPublish = () => {
    if(!getMemberInfo().id) return message.warning("请先登录")
    this.props.history.push("/blog-publish")
  }
  changeCategory = (data) => {
    this.setState({
      categoryId: data.categoryId,
      categoryTitle: data.categoryTitle
    })
    this.getBlogList(this.state.key,data.categoryId,this.state.pageNum,this.state.pageSize)
  }
  render() {
    const { blogList, total, pageNum, categoryTitle } = this.state
    return (
      <div className="blog-container">
        {/* 顶部 */}
        <TopNav style={{ background: '#fff', color: '#666' }} active="/blog" />
        {/* 内容 */}
        <div className="blog-box">
          <div className="blog-left">
            <header>
              <div className="header-left">全部 {categoryTitle ? ">" + categoryTitle : ""}（{total}）</div>
              <div className="header-right">
                <Input.Search placeholder="搜索文章" onSearch={this.onSearch} enterButton />
              </div>
            </header>
            <ul>
              {
                blogList.map(item => {
                  return <BlogItem key={item.id} {...item} />
                })
              }
            </ul>
          </div>
          <div className="page-box">
            <Pagination
              onChange={this.onPageChange}
              defaultCurrent={pageNum}
              total={total}
            />
          </div>
          <div className="blog-right">
            <MyCategory title="文章" changeCategory={this.changeCategory}>
              <Button icon={<EditOutlined />} type="primary" block onClick={this.toBlogPublish}>发布文章</Button>
            </MyCategory>
          </div>
        </div>
        {/* 底部 */}
        <BottomBar style={{ background: '#f9f9f9', borderTop: '1px solid #e5e5e5' }} />
      </div>
    )
  }
}
export default withRouter(Blog)
